// Copyright (C) 2020-2022 Intel Corporation
// Copyright (C) 2022-2024 CVAT.ai Corporation
//
// SPDX-License-Identifier: MIT

import React from 'react';
import { Col } from 'antd/lib/grid';
import Select from 'antd/lib/select';
import Text from 'antd/lib/typography/Text';

import { StatesOrdering } from 'reducers';
import { useSelector } from 'react-redux';

interface StatesOrderingSelectorComponentProps {
    statesOrdering: StatesOrdering;
    changeStatesOrdering(value: StatesOrdering, type: 'sort' | 'label' | 'status'): void;
}

function StatesOrderingSelectorComponent(props: StatesOrderingSelectorComponentProps): JSX.Element {
    const { statesOrdering, changeStatesOrdering } = props;
    const labels = useSelector((state: any): any => state.annotation.job.labels);
    const sortOptions = [
        { value: StatesOrdering.ID_DESCENT, label: 'ID降序' },
        { value: StatesOrdering.ID_ASCENT, label: 'ID升序' },
        { value: StatesOrdering.UPDATED, label: '最新修改' },
        { value: StatesOrdering.LABEL_TYPE, label: '标签类别' },
    ];

    const labelOptions = labels.map((label: any): any => ({
        value: label.id,
        label: label.name,
    }));

    const statusOptions = [
        { value: 0, label: '全部' },
        { value: 1, label: '初审修改' },
        { value: 2, label: '复审待核' },
        { value: 3, label: '复审已核' },
    ];

    return (
        <Col>
            <div className='flex place-items-center gap-3'>
                <Select
                    popupClassName='cvat-objects-sidebar-ordering-dropdown'
                    className='flex-1'
                    value={statesOrdering}
                    onChange={(e) => changeStatesOrdering(e, 'sort')}
                    options={sortOptions}
                />
                <Select
                    options={[{ value: 0, label: '全部' }, ...labelOptions]}
                    placeholder='标签'
                    className='flex-1'
                    onChange={(e) => changeStatesOrdering(e, 'label')}
                    defaultValue={0}
                />
                <Select
                    options={statusOptions}
                    placeholder='审核状态'
                    className='flex-1'
                    onChange={(e) => changeStatesOrdering(e, 'status')}
                    defaultValue={0}
                />
            </div>
        </Col>
    );
}

export default React.memo(StatesOrderingSelectorComponent);
